<template>
  <div class="setG">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item
        v-for="(v,i) in matchMsg.groupList"
        :key="i"
        :name="i"
        @click.native="toggCollaps(v.id)"
      >
        <template slot="title">{{v.name}}</template>
        <el-table :data="tabData" border style="width: 100%">
          <el-table-column label="姓名" align="center">
            <template slot-scope="{row}">
              <el-select
                placeholder="请选择"
                v-if="row.add"
                v-model="row.memberName"
                clearable
                allow-create
                filterable
                class="select"
                @focus="memberArr($event,v.memberList,row)"
                @change="nameChange($event,v.memberList,row)"
              >
                <el-option
                  v-for="(item,i) in memberPer"
                  :key="i"
                  :label="item.memberName"
                  :value="item.id+item.entryNumber"
                >
                  <span style="float: left">{{ item.memberName }}</span>
                  <!-- <span class="entry">——{{ item.entryNumber }}</span> -->
                </el-option>
              </el-select>
              <span v-else>{{row.memberName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="参赛号" align="center">
            <template slot-scope="{row}">
              <el-input v-if="row.add" clearable v-model="row.entryNumber"></el-input>
              <span v-else>{{row.entryNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="成绩" align="center">
            <template slot-scope="{row}">
              <!-- <el-time-picker
                style="width:140px;"
                v-model="row.grade"
                v-if="row.add"
                placeholder="任意时间点"
                value-format="HH:mm:ss"
              ></el-time-picker>
              <span v-else>{{row.grade}}</span>-->
              <div v-if="row.add">
                <input type="text" class="sfm" v-model="row.hh" @input="numSZ($event)" />
                <span class="fg">:</span>
                <input type="text" class="sfm" v-model="row.mm" />
                <span class="fg">:</span>
                <input type="text" class="sfm" v-model="row.ss" />
              </div>
              <span v-else>{{row.grade}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="showSex" label="性别" align="center" v-if="matchMsg.gender=='T'"></el-table-column>
          <el-table-column prop="uid" label="名次" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" circle @click="edit(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="rowB">
          <el-button type="primary" @click="save">保存</el-button>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
var actGid = "";
export default {
  props: {
    matchMsg: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      activeName: 0, //默认展开项
      tabData: [],
      memberPer: [],
    };
  },
  watch: {
    matchMsg: function (n, o) {
      this.activeName = 0;
      if (n.groupList.length > 0) this.toggCollaps(n.groupList[0].id);
    },
  },
  methods: {
    numSZ(e) {
      let v = e.currentTarget.value;
      if (isNaN(v)) {
        e.currentTarget.value = "";
        this.$message.error("请输入数字");
        this.$forceUpdate();
      }
    },
    memberArr(e, list, row) {
      if (this.matchMsg.gender == "T") {
        this.memberPer = list.filter((v) => {
          return v.sex == row.sex;
        });
      } else {
        this.memberPer = list;
      }
    },
    nameChange(e, list, row) {
      // console.log(e, list, row);
      let i = list.find((v) => {
        return v.id + v.entryNumber == e;
      });
      if (i) {
        row.memberName = i.memberName;
        row.entryNumber = i.entryNumber;
        row.id = i.id;
      } else {
        // 新加
        row.memberName = e;
        row.entryNumber = "";
      }
    },
    delPer(id, list, ind) {
      this.$axios
        .get("/sbr/match/guess/delGuessMember?id=" + id)
        .then((res) => {
          let cc = res.data.code;
          if (cc == 200) {
            ind = (this.currP - 1) * 5 + ind;
            list.splice(ind, 1);
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    edit(row) {
      this.$set(row, "add", true);
    },
    save() {
      for (var a = 0; a < this.tabData.length; a++) {
        // || !this.tabData[a].entryNumber
        if (!this.tabData[a].memberName) {
          this.$message.warning("请填写选手信息");
          return false;
        }
      }
      this.tabData.forEach((v) => {
        v.hh = Number(v.hh) > 9 ? Number(v.hh) : "0" + Number(v.hh);
        v.mm = Number(v.mm) > 9 ? Number(v.mm) : "0" + Number(v.mm);
        v.ss = Number(v.ss) > 9 ? Number(v.ss) : "0" + Number(v.ss);
        v.grade = v.hh + ":" + v.mm + ":" + v.ss;
      });
      this.$axios
        .post("/sbr/match/guess/editGuessMemberGrade", this.tabData)
        .then((res) => {
          this.tabData.forEach((v) => {
            v.add = false;
          });
          this.$forceUpdate();
          this.$message.success("保存成功");
        });
    },
    toggCollaps(gId) {
      if (this.activeName !== "") {
        if (gId == actGid) return false;
        this.tabData = [];
        actGid = gId;
        this.getTop3(gId);
      } else {
        this.tabData = [];
        actGid = "";
      }
    },
    getTop3(gId) {
      let oo = {
        matchId: this.matchMsg.matchId,
        groupId: gId,
      };
      // console.log(oo);
      this.$axios
        .get("/sbr/match/getGuessMemberGradeTop3", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          this.tabData = rr;
          let nn = this.matchMsg.num;
          if (this.matchMsg.gender == "T") {
            rr.forEach((v) => {
              v.showSex = v.sex == "M" ? "男" : "女";
              if (v.grade) {
                let gg = v.grade.split(":");
                v.hh = gg[0];
                v.mm = gg[1];
                v.ss = gg[2];
              }
            });
            let arro = [];
            let rM = rr.filter((v) => {
              return v.sex == "M";
            });
            for (var a = 1; a < nn + 1; a++) {
              let has = rM.find((v) => {
                return v.uid == a;
              });
              if (has) {
                arro.push(has);
              } else {
                let oo = {
                  matchId: this.matchMsg.matchId,
                  groupId: gId,
                  memberName: "",
                  entryNumber: "",
                  add: true,
                  uid: a,
                  grade: "",
                  sex: "M",
                  showSex: "男",
                };
                arro.push(oo);
              }
            }
            let rF = rr.filter((v) => {
              return v.sex == "F";
            });
            for (var a = 1; a < nn + 1; a++) {
              let has = rF.find((v) => {
                return v.uid == a;
              });
              if (has) {
                arro.push(has);
              } else {
                let oo = {
                  matchId: this.matchMsg.matchId,
                  groupId: gId,
                  memberName: "",
                  entryNumber: "",
                  add: true,
                  uid: a,
                  grade: "",
                  sex: "F",
                  showSex: "女·",
                };
                arro.push(oo);
              }
            }
            this.tabData = arro;
          } else {
            rr.forEach((v) => {
              if (v.grade) {
                let gg = v.grade.split(":");
                v.hh = gg[0];
                v.mm = gg[1];
                v.ss = gg[2];
              }
            });
            let arro = [];
            for (var a = 1; a < nn + 1; a++) {
              let has = rr.find((v) => {
                return v.uid == a;
              });
              if (has) {
                arro.push(has);
              } else {
                let oo = {
                  matchId: this.matchMsg.matchId,
                  groupId: gId,
                  memberName: "",
                  entryNumber: "",
                  add: true,
                  uid: a,
                  grade: "",
                  sex: "F",
                  showSex: "女·",
                };
                arro.push(oo);
              }
            }
            this.tabData = arro;
          }
        });
    },
  },
  mounted(){
      this.activeName = 0;
      if (this.matchMsg.groupList.length > 0) this.toggCollaps(this.matchMsg.groupList[0].id);
  }
};
</script>
<style scoped>
.CM {
  width: 280px;
}
.rowB {
  text-align: center;
  margin-top: 16px;
}
.setG >>> .el-collapse {
  border-color: #67c23a;
}
.setG >>> .el-collapse-item__header {
  background-color: #f0f9eb;
  color: #67c23a;
  text-indent: 20px;
  font-weight: 500;
  font-size: 22px;
  border-color: #67c23a;
}
.setG >>> .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
.setG >>> .el-collapse-item__wrap {
  border-color: #67c23a;
}
.select {
  width: 135px;
}
.entry {
  float: left;
  /* color: #8492a6;
  font-size: 13px; */
  text-indent: 8px;
}
.sfm {
  width: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 40px;
  text-align: center;
  /* float: left; */
}
.fg {
  margin: 0 4px;
}
</style>